angular: @angular/Core gives "Uncaught TypeError: Cannot read property 'type' of null"

I’m submitting a … (check one with “x”)

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior When I install @angular/core in a npm linked package I get the error message:

Uncaught TypeError: Cannot read property 'type' of null

Expected/desired behavior Either the error message is more specific or I should be able to install @angular/core without a problem

Reproduction of the problem I’m afraid I can’t replicate with plunkr as it’s to do with an npm linked package.

I’ve spent some hours getting to the cause of the problem and this is what I found:

I have a ngModule in my web app
It works great
I decide to move this ngModule somewhere else in my computer so that I can use with other web apps
I install it in my app with npm link (no single line of code has been edited)
App doesn’t work anymore. I get the error:

Uncaught TypeError: Cannot read property 'type' of null

(anonymous function)    @   metadata_resolver.js:698
getTransitiveModules    @   metadata_resolver.js:697
CompileMetadataResolver._getTransitiveNgModuleMetadata  @   metadata_resolver.js:411
CompileMetadataResolver.getNgModuleMetadata @   metadata_resolver.js:283
RuntimeCompiler._compileComponents  @   runtime_compiler.js:150
RuntimeCompiler._compileModuleAndComponents @   runtime_compiler.js:72
RuntimeCompiler.compileModuleAsync  @   runtime_compiler.js:49
PlatformRef_._bootstrapModuleWithZone   @   application_ref.js:368
PlatformRef_.bootstrapModule    @   application_ref.js:361
(anonymous function)    @   main.ts:4
__webpack_require__ @   bootstrap 7768849…:586
fn  @   bootstrap 7768849…:109
(anonymous function)    @   main.js:7
__webpack_require__ @   bootstrap 7768849…:586
webpackJsonpCallback    @   bootstrap 7768849…:21
(anonymous function)    @   main.js:1

With that stack trace I was expecting it would be something with webpack or typescript. However no errors are presented in the console. After A LOT of trial and error (I find this error message impossible to debug) I have found that I can remove @angular/core from my npm linked package and web app works again. The weird thing is that all the other @angular packages are installed in the package and they don’t seem to cause conflict.

Right now, what I’ve done is remove @angular/core from the npm linked package. At least that makes app to work again. However this gives Typescript errors as @angular/core nowhere to be found in the npm linked package.

What is the expected behavior? No conflict with @angular/core

What is the motivation / use case for changing the behavior? Being able to use ngModules as npm linked packages

Please tell us about your environment:

Angular version: 2.0.0-rc.5
Browser: [ Chrome XX ]
Language: [ TypeScript 2]

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16 (8 by maintainers)

Most upvoted comments

I’ve done some test and I think that the problem is with the symbolic links and NgModule.

Caballerog on Aug 26, 2016

thanks @pkozlowski-opensource for the suggestion. If that’s how it’s implemented, that would explain why it’s a TypeError instead of ReferenceError for example.

However, this is what my ngModule looks now and I still get the exact same Error type and message:

I’ve tried the following scenarios to eliminate as many suspects as possible:

Empty object

@NgModule({
})
export class BtsAngularModule { }

Empty imports array

@NgModule({
imports: [],
exports: []
})
export class BtsAngularModule { }

Basic angular module import

import { ReactiveFormsModule }        from "@angular/forms";

@NgModule({
imports: [ReactiveFormsModule],
exports: [ReactiveFormsModule]
})
export class BtsAngularModule { }

In all three cases, I get the same null TypeError.

And, in all three cases removing @angular/core from the linked module makes the error go away and the app works fine. Typescript complains that @angular/core is referenced but not installed. I’m guessing Webpack is packaging it anyway as it is part of the main app, and so the external module can run fine as ngModule in the browser.

cortopy on Aug 26, 2016