Angular-cli: AOT import * error: ERROR in Illegal state: symbol without members expected, but got

[MaklaCof]

Bug Report or Feature Request (mark with an x)

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

I did and search suggested to open new issue.

Versions.

node --version: v7.10.0
npm --version: 4.2.0
window 10 - 64bit

Repro steps.

Running command: webpack --env.aot --env.client & webpack --env.aot --env.server from aspnetcore-angular2-universal.
When importing components/services with * I get error if any import also includes *.
For example this works:

//lazy.module.ts
import * as components from "./components/all";

//all.ts
import {SomeComponent} from "./some";
export {SomeComponent};

And this is not working:

//lazy.module.ts
import * as components from "./components/all";

//all.ts
import * as childs from "./childs";                 //I THINK THIS CAUSE ERROR
import {SomeComponent} from "./some";
export {childs, SomeComponent};

//childs.ts
import {OtherComponent} from "./other";
export {OtherComponent};

The log given by the failure.

ERROR in Illegal state: symbol without members expected, but got {"filePath":"E:/test-project/trunk/test-project/Client/app/modules/lazy/components/all.ts","name":"childs","members":["OtherComponent"]}.

Desired functionality.

AOT compiles successfully.

Full error

 ERROR in Illegal state: symbol without members expected, but got {"filePath":"E:/test-project/trunk/test-project/Client/app/modules/lazy/components/all.ts","name":"childs","members":["OtherComponent"]}.

    ERROR in E:/test-project/trunk/test-project/Client/main.server.aot.ts (11,42): Cannot find module './ngfactory/app/server-app.module.ngfactory'.

    ERROR in ./Client/main.server.aot.ts
    Module not found: Error: Can't resolve './ngfactory/app/server-app.module.ngfactory' in 'E:\test-project\trunk\test-project\Client'
     @ ./Client/main.server.aot.ts 7:0-87

[MaklaCof]

If it helps I experience another interesting error inside nested lazy module.

    ERROR in Unexpected value 'Category in e:/OpPISWeb/trunk/OpPISWeb/Client/app/modules/var-design/modules/admin/components/components.ts' declared by the module 'VarDesignAdminModule in e:/OpPISWeb/trunk/OpPISWeb/Client/app/modules/var-design/modules/admin/admin.module.ts'. Please add a @Pipe/@Directive/@Component annotation.

    ERROR in e:/OpPISWeb/trunk/OpPISWeb/Client/main.server.aot.ts (11,42): Cannot find module './ngfactory/app/server-app.module.ngfactory'.

    ERROR in ./Client/main.server.aot.ts
    Module not found: Error: Can't resolve './ngfactory/app/server-app.module.ngfactory' in 'e:\OpPISWeb\trunk\OpPISWeb\Client'
     @ ./Client/main.server.aot.ts 7:0-87

Components.ts:

import * as Category from "./category/category";

export { Category };

[mscudlik]

same issue here using constants like

export const Constants = {
  foo = 'bar'
  // ...
};

provided by a shared "util" module and used in various (lazy-loaded) modules, including routing modules

[sherlock1982]

Is it the same?

Error: Illegal state: symbol without members expected, but got {"filePath":"skipped/call-history/data/call-history-type.ts","name":"CallHistoryType","members":["AllCalls"]}.

And callhistory-type.ts contains:

export enum CallHistoryType {
    AllCalls = 0,
    Missed = 1,
    Received = 2,
    Outgoing = 3,
    Abandoned = 4
}

Appeared when I moved from 4.1.3 to 4.3.1
With 4.2.6 it compiles

[mscudlik]

@sherlock1982: yes, i think so, i had/have the same issue after upgrading from 4.1.3 to 4.3

[rafiwardak2003]

I tried upgrading from 4.1.3 to 4.3.2, and got this issue. I had to go back to 4.1.3. Mine is caused by re-exporting Enums, but I assume that's the first stop, and then it will complain about all re-exports.

[brentwilton]

We have the same issue in Angular 4.3.3 when using enums in our NgModule Route data.

note: the following code compiles in AoT but leaves nulls in the route data, (as pointed out by @mattscu) and not the actual enum value.

AoT compiles but does not work

export enum ExampleEnum { foo, bar }
export default ExampleEnum;

import ExampleEnum from './example.enum.ts';
const exampleRoutes: Routes = [
    {
        path: '',
        component: ExampleComponent,
        data: {
            foo: ExampleEnum.foo
        }
    }
];

[mscudlik]

@brentwilton: tried your solution and it compiled with aot, but unfortunately the compiled code had null values while the non aot code worked - so the workaround didn't really work for me :(

(i' not using enums but constants like mentioned above)

tried angular-cli 1.27 and the new 1.3.0 but both didnt work

[junglebarry]

I may be confusing things here, but is this related to https://github.com/angular/angular/issues/18170?

[GeorgeKnap]

just getting this error during CLI AOT prod build.

ERROR in Error: Illegal state: symbol without members expected, but got {"filePath":"C:/Development/Intens.eCall/trunk/Intens.eCall.Website/src/app/shared/models/roles.enum.ts","name":"Role","members":["eCallUserAdministrator"]}.
    at StaticSymbol.assertNoMembers (C:\Development\Intens.eCall\trunk\Intens.eCall.Website\node_modules\@angular\compiler\bundles\compiler.umd.js:794:19)
...

at enum:

export enum Role {
    eCallUserAdministrator,
    MSD,
    IVS,
    PSAP
}

packages:

  "dependencies": {
    "@angular/core": "5.0.0-beta.7",
    "@angular/common": "5.0.0-beta.7",
    "@angular/animations": "5.0.0-beta.7",
    "@angular/platform-browser": "5.0.0-beta.7",
    "@angular/platform-browser-dynamic": "5.0.0-beta.7",
    "@angular/compiler": "5.0.0-beta.7",
       "@angular/forms": "5.0.0-beta.7",
    "@angular/http": "5.0.0-beta.7",
    "@angular/router": "5.0.0-beta.7",
  },
  "devDependencies": {
    "@types/node": "*",
    "@types/lodash": "*",
    "@types/service_worker_api": "*",
    "@types/arcgis-js-api": "4.4.0",
    "@angular/cli": "1.4.4",
    "@angularclass/hmr": "2.1.3",
    "@angular/compiler-cli": "5.0.0-beta.7",
    "@angular/service-worker": "1.0.0-beta.16",
    "codelyzer": "3.2.0",
    "node-sass": "4.5.3",
    "ts-node": "3.3.0",
    "tslint": "5.7.0",
    "typescript": "2.5.3"
  }

---

edit:
I've managed to isolate the problem to a routing module where this enum was used as a route data parameter:

...
{
                        path: 'logs',
                        canActivateChild: [RoleGuard],
                        data: { roles: [Role.MSD, Role.IVS] },
                        loadChildren: '../../features/logs/scripts/logs.module#LogsModule'
                    },
...

removing the enum from this file and replacing enum values with numbers fixed the AOT error.

[marioese]

I ran into the exact same problem today, while passing an enum value as route data (similar to what @GeorgeKnap described).

My route example:
{ path: "item/:itemId", component: ItemComponent, data: { foo: someEnum.EnumValueX } }

My enum example:

  export someEnum {
    EnumValueX = 0,    /* <== Culprit */
    EnumValueY = 1,
    EnumValueZ = 2
  }

In my case however, I managed to get this working by removing the 0 value from my enum:

  export someEnum {
    EnumValueX = 1,
    EnumValueY = 2,
    EnumValueZ = 3
  }

First example fails in AOT build, while the second one succeeds. Though this may not be a solution for everyone, it might be good to know!

[Vladimex]

The same problem with enums in my project. Version: 4.4.6
Will it be fixed or I have to remove all enums from the project?

[MaklaCof]

@hansl Any progress? It's 5 months. I just upgraded to angular 4.4.6 and angular CLI 1.4.9. The error is still raised.

I have over 300 components and it is becoming a real mess because I can not nest imports into NgModule.
I would really like to do it this way:

import * as Containers from "./containers/containers";
@NgModule({
    declarations: [
        AdminComponent,
        Containers.SyncComponent,
        Containers.TagsComponent,
        Containers.DashboardComponent,
        Containers.Tables.TablesComponent,
        Containers.Tables.Translates.TranslateComponent,
        Containers.Tables.Translates.TranslateTranslateComponent,
        Containers.Tables.Countries.CountriesComponent,
        Containers.Tables.Countries.CountryTranslatesComponent,
        Containers.Tables.Settings.SettingsComponent,
        Containers.Tables.PostCodeComponent,
        Containers.Tables.AddressComponent,
        Containers.Tables.Users.UsersComponent,
        Containers.Tables.Users.UserSettingsComponent,
        Containers.Tables.Users.UserFlagsComponent,
        Containers.Tables.Groups.GroupsComponent,
        Containers.Tables.Groups.GroupUsersComponent,
        Containers.Tables.Groups.GroupRightsComponent,
        Containers.Tables.Partners.PartnersComponent,
        Containers.Tables.Partners.PersonsComponent,
        Containers.Tables.Partners.AddressesComponent,

and not this:

import { SyncComponent } from "./sync/sync.component";
import { TagsComponent } from "./tags/tags.component";
import { DashboardComponent } from "./dashboard/dashboard.component";
import { TablesComponent as TablesTablesComponent } from "./tables.component";
import { AddressComponent as TablesAddressComponent } from "./address/address.component";
import { PostCodeComponent as TablesPostCodeComponent } from "./postcode/postcode.component";
import { CountriesComponent as TablesCountriesCountriesComponent} from "./countries/countries.component";
import { CountryTranslatesComponent as TablesCountriesCountryTranslatesComponent} from "./country-translates/translates.component";
//.....
@NgModule({
    declarations: [
        AdminComponent,
        SyncComponent,
        TagsComponent,
        DashboardComponent,
        TablesTablesComponent,
        ablesTranslatesTranslateComponent,
        TablesTranslatesTranslateTranslateComponent,
        TablesCountriesCountriesComponent,
        TablesCountriesCountryTranslatesComponent,
        TablesSettingsSettingsComponent,
        TablesPostCodeComponent,
        TablesAddressComponent,
        TablesUsersUsersComponent,
        TablesUsersUserSettingsComponent,
        TablesUsersUserFlagsComponent,
        TablesGroupsGroupsComponent,
        TablesGroupsGroupUsersComponent,
        TablesGroupsGroupRightsComponent,
        TablesPartnersPartnersComponent,
        TablesPartnersPersonsComponent,
        TablesPartnersAddressesComponent,

[Sky4CE]

@MaklaCof , I have same project structure with imports as you have (your Containers), have you manage to work with AOT ?

[MaklaCof]

@Sky4CE No I din't, but this is huge problem for me. I have over 100 containers and component in each lazy loaded module. Aliases in NgModule seems horrible solution. Currently I am not building as AOT, but will need to do something in next month, if @hansl doesn't fix this.
Please, let me know if you found any solution.

[mgechev]

Can you still reproduce it with the latest CLI?

[MaklaCof]

I am not sure. I restructure my entire project. I couldn't live with that.

[mgechev]

If the problem still exists in the latest version of the CLI, please open a new issue following the template and providing a minimal demo where we can reproduce it. Thanks! :-)

[angular-automatic-lock-bot[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._}