I have an existing Angular application which I am now rendering with Angular Universal severside. The application uses Angular material. Unfortunately, the styling of the material components is not rendering correctly on the node server. Does anyone have any idea what this could be due to?
app.module.ts
imports: [
BrowserAnimationsModule,
BrowserModule.withServerTransition({ appId: "serverApp" }),
NoopAnimationsModule,
ReactiveFormsModule,
AppRoutingModule,
MaterialModule,
],
app.server.module.ts
imports: [AppModule, ServerModule],
Browser
Server
check on your browser development tool F12 to see if there are other errors. I bet you there are and that will give you the hint to what is going on.
Related
I am using angular 10 and angular material 10.
the angular material dialogue is not working in the production build (ng serve --prod and ng build --prod) but It is working fine local dev environment (ng serve)
I have already added the component in the entryComponents and bootstrap
It is not throwing any kind of error in the console. what I can see is the card is loaded and no components inside the dialog are available,
You can see the below screenshot, which is loading the card but not any component inside it.
After a lot of research I found, the problem is with the IVY engine. For some people changing the below can solve the problem.
tsconfig.json
"angularCompilerOptions": {
"enableIvy": true
},
If you want to use the Ivy engine. the problem will be resolved if you update the Angular 10 project to Angular 11.
Currently, I have fresh installation of vuejs app with some test pages and components. All my routes and components are using dynamic imports to load js chunks only when user goes to a particular route or a component is rendered and it is working fine in SPA and SSR mode. The problem occurs in PWA mode when it prefetches all chunks at start.
I have tried 'exclude' function but it still pre-fetched the file.
Is there a way to exclude complete routes e.g. /admin to be pre-fetched? As this is only for internal use and not needed for offline usage.
We are using webpack + workbox bundler.
Any help would be highly appreciated.
I edited your question's title to match what you're actually asking. I hope I got it right :)
Yes, that's possible. You can exclude a lazy loaded chunk ("route" or "page" or whatever) from the asset list to be precached.
I assume you're using Vue CLI based project. Look for the PWA config options here https://cli.vuejs.org/config/#pwa. It will lead you to whole config of the Vue CLI PWA plugin here https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa. That will tell you how to pass any options to the underlying workbox-webpack-plugin. What you need is the excludeChunks option, described here https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config.
I am working to refactor a legacy MVC5 application and in oder to include the output of the Angular build process into views, I decided to use the Bundling functionality offered by Asp.net framework, it all works, in dev and production mode (so I correctly handle cache busting).
The missing problem I am trying to solve, is to support dynamic updates triggered by the watch build option (live reload in the serve command), so below some snippet of codes to show what I did so far.
Bundle configuration
public static void RegisterBundles(BundleCollection bundles)
{
// Bundle QSB scripts and styles
bundles.Add(new ScriptBundle("~/Content/js/QSB")
.Include(
"~/Content/ng/QSB/runtime.*",
"~/Content/ng/QSB/es2015-polyfills.*",
"~/Content/ng/QSB/polyfills.*",
"~/Content/ng/QSB/styles.js",
"~/Content/ng/QSB/vendor.*",
"~/Content/ng/QSB/main.*"));
bundles.Add(new StyleBundle("~/Content/css/QSB")
.Include("~/Content/ng/QSB/*.css"));
}
Angular configuration
[...]
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "../BackendProjectFolder/Content/ng/QSB",
"index": "projects/qsb/src/index.html",
"main": "projects/qsb/src/main.ts",
"polyfills": "projects/qsb/src/polyfills.ts",
[...]
When developing I first execute the command ng b --watch, once ready I start debugging the application, in order to see the changes I need to hit F5 refreshing the browser page.
In the development machine the mvc application is hosted in IIS and always available.
Is there a way to simulate the live reload available with the serve command?
Any suggestion?
I have a scenario where I am using .NET MVC to serve up an initial page 'index.cshtml' which then delivers all the Angular components required to run a single page app.
For routing, I am using the excellent ui-router component by the Angular-UI team, and for the most part it works well.
My issue is with the very first page load. When browsing to the site, it doesn't go to the very first state/url. It just loads up my 'shell' with no content. My app config code looks like this:
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: "/home",
views: {
"content": {
templateUrl: "app/dashboard/dashboard.html",
controller: 'DashboardController'
},
"subNav": {}
},
});
If I click around the navigation (generated by ui-sref attributes) everything works fine. It's only the first page load.
My first thought was that it was the .NET MVC routing that is somehow borking up the first request, so I think I've disabled it by changing the default route to the following:
routes.MapRoute(
name: "Default",
url: "{*url}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
But I can't be sure this has done what I wanted it to do. It certainly didn't fix my issue.
Any ideas?
Your angular code looks good to me. I have the exact same code on my project and when I hit / I get redirected to /home.
It might be that the template url is not accessible because of ASP.Net MVC router.
Other tips:
Make sure that when you refresh the page on /home it works correctly
Make sure you are adding the DashboardController to y our app module.
Manually hit app/dashboard/dashboard.html to check if you can get the template.
I think you have to actively set a route for otherwise to be used.
You can solve the problem by setting the state in the run block and handle the $stateChangeError.
app.run(['$rootScope','$state',function($rootScope,$state) {
$state.transitionTo('home');
$rootScope.$on('$stateChangeError',
function(event, toState, toParams, fromState, fromParams, error){
$state.transitionTo('home');
});
}]);
A more radical alternative is to remove your reliance on .net MVC to serve up any pages. You could then move all your server side code into a .net webApi for a reuseable api including all security etc. (although you should replicate your security in your front end also). Your Angular app with ui-router would then be responsible for all navigation and routing. Makes it less complex in my opinion. No need to mix an angular SPA and MVC. All the features in MVC such as bundling/minification/routing etc can be done in your front end angular app using bower/grunt/gulp packages and configuration. Just requires you to do a bit more reading...leaves you with a cleaner less complex solution and only and index.html and associated assets to deploy (alongside your Webapi which you can re-use). To do this you can create a web project (non MVC) add an index.html and off you go. If you want to add in Modern Web development techniques you can use one of the .net vNext web application templates which allows you to integrate with npm/gulp/grunt/bower. Microsoft have already built this in. Deployment can ignore the vNext project and just work on the html/js/assets. Productivity enhancements from the vNext project, yet simplicity from losing MVC.
There are several ways to force an external load (data-ajax="false", rel="external"), but what if I have an external link that will serve me a jquery mobile page and I want it to load via ajax with transitions (without the page reloading)? Anyone have a straightforward solution?
The reason I'm asking is that I'm building a PhoneGap IOS app and the index.html file is no longer on the same path as the pages that are being fetched.
Thanks
You can use framework such as jQTouch or jQuery Mobile. These frameworks have built in functions which can help you in call cross domain AJAX calls with in the application it self.
For example:
$.get("test.php",
{ name: "micky", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
See demo here: http://jqtouch.com/preview/demos/ but make sure to use web kit enabled browsers such as Chrome/Safari.