"ng serve" gives compilation error

[akhilbojedla]

OS: Windows 10

Versions :

@angular/cli: 1.0.0-rc.0
node: 6.10.0
os: win32 x64

Reproduction steps:

It's an app that is fully created with angular-CLI.

• "ng serve" gives an error but compiles successfully the second time if made any changes to any of the files.

The log given by the failure.

`ng serve
** NG Live Development Server is running on http://localhost:4200 **
Hash: 9fbd9d1c055b9f5a4fca
Time: 13195ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 153 kB {5} [initial] [rendered]
chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 198 kB {5} [initial] [rendered]
chunk {2} main.bundle.js, main.bundle.js.map (main) 17.5 kB {4} [initial] [rendered]
chunk {3} scripts.bundle.js, scripts.bundle.js.map (scripts) 434 kB {5} [initial] [rendered]
chunk {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.13 MB [initial] [rendered]
chunk {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'routes'. Consider exporting the symbol (position 5:7 in the original .ts file), resolving symbol AppRoutingModule in D:/TesTracker/src/app/app-routing.module.ts
webpack: Failed to compile.
webpack: Compiling...
Hash: 9fbd9d1c055b9f5a4fca
Time: 2302ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 153 kB {5} [initial]
chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 198 kB {5} [initial]
chunk {2} main.bundle.js, main.bundle.js.map (main) 17.5 kB {4} [initial]
chunk {3} scripts.bundle.js, scripts.bundle.js.map (scripts) 434 kB {5} [initial]
chunk {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.13 MB [initial]
chunk {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
webpack: Compiled successfully.`

Mention any other details that might be useful.

The issue arises when I create child routes and use loadchildren from the calling router module

Note: I have made no changes when it compiled successfully the second time. I just re-saved a file just to make it recompile and it does the work.

Update

I figured out the exact issue. The issue is with lazy loading. When I use following route array with PagesModule in imports
[{ path: '', children: [ { path: 'pages', loadChildren: () => PagesModule }, { path: '', redirectTo: 'pages', pathMatch: 'full' } ] }]

But works perfectly when I use the following routes array:
[ { path: '', children: [ { path: 'pages', loadChildren: './pages/pages.module#PagesModule' }, { path: '', redirectTo: 'pages', pathMatch: 'full' } ] } ]

[marcelino-m]

I have same issue in linux, but this arises when I use "typeRoots" option in tsconfi.app.json with local type definitions file.

Randomly fails with the message:

ERROR in /home/marcelo/lab/ool/nool-w/src/app/app.component.ts (2,23): Cannot find module 'openlayers'.)

[vladotesanovic]

@marcelino-m

Don't use typeRoots anymore, here is documentation how to use custom typings:

Easiest for you is to create src/typings.d.ts file than in that file to import your custom types:

src/typings.d.ts

import '../custom_typings/lib1/index';
import '../custom_typings/lib2/index';

[akhilbojedla]

I figured out the exact issue. The issue is with lazy loading. When I use following route array with PagesModule in imports
[{ path: '', children: [ { path: 'pages', loadChildren: () => PagesModule }, { path: '', redirectTo: 'pages', pathMatch: 'full' } ] }]

But works perfectly when I use the following routes array:
[ { path: '', children: [ { path: 'pages', loadChildren: './pages/pages.module#PagesModule' }, { path: '', redirectTo: 'pages', pathMatch: 'full' } ] } ]

[marcelino-m]

@vladotesanovic

Thanks for the help!.

[doggy8088]

@vladotesanovic Is there any reason why you said Don't use typeRoots anymore?

[marcelino-m]

@doggy8088
Here the docs, https://github.com/angular/angular-cli/wiki/stories-third-party-lib

[doggy8088]

@marcelino-m Thanks.

In my testing, the npm start unable to compile all my TypeScript file correctly. It just can't include @types correctly.

Here is the steps to repro the problem.

1. ng new demo0304 --ng4
2. cd demo0304
3. npm install --save-dev @types/jquery
4. Edit src/app/app.component.ts. Add the following line:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  constructor() {
    $.get('');
  }
}

5. Edit src/tsconfig.app.json

"types": ["jquery"]

---

When you execute npm start, you will get this error:

If I run tsc -p src\tsconfig.app.json, no problem at all.

In my Visual Studio Code, no problem at all.

Is that an issue?

[marcelino-m]

@doggy8088 Hi,

I think you are missing install jquery. You have just instaled @types/jquery (types definition for jquery)
not jquery itself.

Here what I done:

ng new demo0304 --ng4
cd demo000304
npm install --save jquery

Edit app.component.ts (import jquery module)

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  constructor() {
    $.get('');
  }
}

So run

ng serve

Run Ok.

if you wish now you cant install @types/jquery

npm install --save-dev @types/jquery

Cheers!

[doggy8088]

@marcelino-m Yes, you are right. It do works using your way to setup jquery.

In my case, my jquery has already been loaded in the index.html file. I don't want to load it again and bundled with my Angular app. So there is long time, I use jquery by this way which is load @types/jquery only in my app but full jquery library.

As I mentioned in my original question, my current setup can work as expected in my Visual Studio Code and using tsc standalone. It only show up errors when I using ng serve. I don't know why. Can you tell?

[doggy8088]

Known issue & PR here: #5251

[filipesilva]

Heya, errors like Error encountered resolving symbol values statically mean that there has been some problem in statically analyzing your app.

The CLI always runs statical analysis on code to ensure it will run when compiled with AOT. This may cause a lot of static analysis errors to surface when importing your project into the CLI, or upgrading for older versions where we didn't run this kind of analysis.

A good resource on how to to debug these errors is https://github.com/rangle/angular-2-aot-sandbox#aot-dos-and-donts.

The other issues brought up seem to be completely unrelated to the original one. Please open new issues and fill out the issue template for them.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}