I am facing a common exception:
Unexpected directive value 'undefined' on the View of component 'AppComponent'
Many solutions I found online did not address my specific issue related to circular dependencies or missing export statements. None of the suggested fixes seem to work for me...
Within my project structure, I have:
src/
myproject/
components/
services/
templates/
...
main.ts
index.html
systemjs.config.js
public/
libs/ <- required libs, copied from node_modules
myproject/ <- compiled .ts files and copied resources from /src/myproject
index.html <- copied from /src/myproject
systemjs.config.js <- copied from /src/myproject
gulpfile.ts
*.json <- tsconfig, package, typings, ...
To deploy the project, I compile the .ts files, output them to /public, copy all non-.ts resources to /public, and include required libraries in /public/libs.
I utilize typescript 1.9 with the paths option in tsconfig.json for path mapping:
// excerpt from /tsconfig.json
{
"compilerOptions": {
// more options
"paths": {
"myproject/*": ["./src/myproject/*"]
}
// more options
}
}
All Angular2 components reside in /src/myproject/components and are exported in an index.ts file:
// /src/myproject/components/index.ts
export * from './app.component';
export * from './a.component';
export * from './b.component';
export * from './c.component';
This setup allows for clean imports, such as:
// excerpt from /src/myproject/components/app.component.ts
import { ComponentA, ComponentB, ComponentC } from 'myproject/components';
The above import method works flawlessly except when importing AppComponent in main.ts:
// excerpt from /src/myproject/main.ts
import { AppComponent } from 'myproject/components';
Upon trying to view the project in the browser, I encounter the following exception:
EXCEPTION: Unexpected directive value 'undefined' on the View of component 'AppComponent'
If I change the import in main.ts to:
// excerpt from /src/myproject/main.ts
import { AppComponent } from 'myproject/components/app.component';
Everything works as expected. This inconsistency puzzles me. Any insights on why this is happening?
Update: Despite finding a workaround, I prefer to avoid relative imports and seek a consistent solution. Why does this exception occur only in main.ts? Any suggestions on addressing this issue?
Update 2: Since the problem persists, I am initiating a bounty for assistance.