TeamMaestro / angular-native-seed

Build web apps and NativeScript applications from one codebase using the AngularCLI.
265 stars 71 forks source link

{N} AOT builds but fails to run #31

Closed fourctv closed 7 years ago

fourctv commented 7 years ago

Just got a fresh copy of the seed and npm run start-ios-bundle --emulator gives me this error:

CONSOLE ERROR file:///app/vendor.js:1413:24: ERROR SyntaxError: JSON Parse error: Unexpected EOF

The app loads on the iOS emulator, but the Home page does not show up.

Running the app on the emulator works fine (npm run ios), just the AOT build fails.

Environment: OSX 10.11.6 webpack:2.6.1 node: 7.4.0 tsc: 2.3.4 tns: 2.5.2 simulator: iPad Pro 9.7 (iOS 10.2)

fourctv commented 7 years ago

Same behaviour when trying android. npm run android works as expected, but npm tablet-android-bundle builds the app, but fails on start with similar error:

JS: ERROR SyntaxError: Unexpected end of JSON input

On difference is that on android I can see the 2 buttons on the nav bar, albeit w/o any text. When clicking those empty buttons it does load Home or About pages, but the text displayed shows only:

home.title
home.description

or

about.title
about.description

FYI, I've updated nativescript to 3.0.3, and got the same results as I had with 2.5.2.

llwt commented 7 years ago

Just ran into the same thing. I think it might be an issue with the TranslateHttpLoader as our app is starting but our translations aren't being processed. Poking around a bit now to see if I can figure out what's going on.

@fourctv Did you ever figure this out?

llwt commented 7 years ago

Yeah so it looks like the assets directory was just not being copied over in the aot build. Adding this line to the CopyWebpackPlugin config in nativescript/webpack.config.js fixed it for me:

{ from: 'assets', to: 'assets', type: 'dir' },

Edit: I also noticed that the aot build was lacking the root stylesheets for us. I ended up adding a tns prepare <platform> command inbetween the npm run prep<device and npm run start-<paltform>-bundle commands which seemd to work.

e.g.: "tablet-ios-bundle": "npm run prepTablet && tns prepare ios && npm run start-ios-bundle",

In the process of migrating over a project to this seed, once I've got everything working I'll throw together a pull request with what we had to change to get this working.

donburgess commented 7 years ago

Thanks @llwt. I was noticing the same patterns. We appreciate the PR and will likely have a chance to pull it in this weekend if submitted.

fourctv commented 7 years ago

@db3dev, following @llwt and your suggestions, I modified webpack.config.js to use the following as CopyWebpackPlugin:

        new CopyWebpackPlugin([
            { from: mainSheet },
            { from: "css/**" },
            { from: "fonts/**" },
            { from: "assets/**" },
            { from: "**/*.jpg" },
            { from: "**/*.png" },
            { from: "**/*.xml" },
        ], { ignore: ["App_Resources/**"] }),

Now AOT runs fine. Still having trouble with stylesheets not moving over and I'll try @llwt recent suggestions.

I'll let you know if that works for me too.

fourctv commented 7 years ago

I confirm that adding tns prepare ios between prep and build did solve all my issues.

Now all my styles and fonts come up as expected on a 'release' build, and XCode does not complain about missing icons either.

Awesome!

donburgess commented 7 years ago

I updated webpack config to include the assets glob. Sorry we forgot to add it back in when upgrading to the latest version of nativescript's webpack package.

Also added tns prepare commands to the build scripts.

PR #35