Angular-cli: Backticks instead of quotes in styleUrls or templateUrl breaks ng serve/build in CLI ^1.5.0

Created on 5 Oct 2017 · 7Comments · Source: angular/angular-cli

Original title: Absolute import paths break serve/build with cli 1.5.0-beta.3

Bug Report or Feature Request (mark with an `x`)

- [ X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.5.0-beta.3
node: 8.3.0
os: win32 x64
@angular/animations: 5.0.0-rc.0
@angular/cdk: 2.0.0-beta.11
@angular/common: 5.0.0-rc.0
@angular/compiler: 5.0.0-rc.0
@angular/core: 5.0.0-rc.0
@angular/forms: 5.0.0-rc.0
@angular/http: 5.0.0-rc.0
@angular/material: 2.0.0-beta.11
@angular/platform-browser: 5.0.0-rc.0
@angular/platform-browser-dynamic: 5.0.0-rc.0
@angular/router: 5.0.0-rc.0
@angular/cli: 1.5.0-beta.3
@angular/compiler-cli: 5.0.0-rc.0
typescript: 2.4.2

Repro steps.

We are using absolute import paths relative to src in our project. Example ->
main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from 'environments/environment';

import { AppModule } from 'app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.log(err));

This works fine with cli < 1.5.x but when I build (with either ng s or ng build) I get the error below which appears to be caused by the way we have our tsconfig files set up to allow for vs code to give us autocomplete absolute import paths.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

src/tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

The log given by the failure.

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve ' `./app.component.html`' in 'c:\absolute-path-to-project\src\app'
resolve ' `./app.component.html`' in 'c:\absolute-path-to-project\src\app'
  Parsed request is a module
  using description file: c:\absolute-path-to-project\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: c:\absolute-path-to-project\package.json (relative path: ./src/app)
    resolve as module
      c:\absolute-path-to-project\src\app\node_modules doesn't exist or is not a directory
      c:\absolute-path-to-project\src\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in c:\absolute-path-to-project\node_modules
        using description file: c:\absolute-path-to-project\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: c:\absolute-path-to-project\package.json (relative path: ./node_modules)
          using description file: c:\absolute-path-to-project\package.json (relative path: ./node_modules/ `./app.component.html`)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              c:\absolute-path-to-project\node_modules\ `.\app.component.html` doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              c:\absolute-path-to-project\node_modules\ `.\app.component.html`.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              c:\absolute-path-to-project\node_modules\ `.\app.component.html`.js doesn't exist
            as directory
              c:\absolute-path-to-project\node_modules\ `.\app.component.html` doesn't exist

Desired functionality.

Build is successful with absolute paths for imports as it was with cli 1.4.x

help wanted 3 (nice to have) bufix

Source

seangwright

Most helpful comment

I'm going to reopen this to actually fix it. It shouldn't be a hard fix.

filipesilva on 2 Nov 2017

👍4

All 7 comments

@sgwatgit heya, I'm trying to reproduce this but having trouble. This is what I did:

made a new project
updated cli to 1.5.0-beta.4, all angular packages to 5.0.0-rc.1, typescript to 2.5.2
npm i
added "baseUrl": "src", to ./tsconfig.json
didn't change ./src/tsconfig.app.json because it already had "baseUrl": "./",
changed imports in ./src/main.ts, and ./src/app/app.module.ts to use absolute imports
ran ng build

It seemed to build correctly. Can you give me a repro from a new project that fails please?

filipesilva on 12 Oct 2017

@filipesilva I found the issue.

Somehow (not sure if a cli version ever generated bad code) my app.component.ts had backticks around the ./app.component.html path in my decorator.

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'myapp-root',
  templateUrl: `./app.component.html`,
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  constructor() {}
}

This was not causing problems with 1.4.x CLI but switching to 1.5.x produced the error above. I should note that the backticks are in the error above, they are just really hard to see if you aren't looking for them.

You can close this - I hope it eventually helps someone else. Thanks!

seangwright on 13 Oct 2017

👍2

Got it, thanks for letting us know!

filipesilva on 17 Oct 2017

@filipesilva
I've just created a new project (ng new xxx) with @angular/cli 1.5 and @angular/* 5.0.0

And adding backtick to templateUrl or styleUrls of a component always makes ng serve failed (same as @sgwatgit described)..